<template>
  <el-dialog
    :title="title"
    top="50px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :visible.sync="isVisible"
  >
    <div class="block-area">
      <div class="title">1.模板下载</div>
      <!--      <ul class="btn-list">-->
      <!--        <li v-for="item in templateList" :key="item.name">-->
      <!--          <a download :href="item.url">{{ item.name }}</a>-->
      <!--        </li>-->
      <!--      </ul>-->
      <el-button-group>
        <el-button
          v-for="item in templateList"
          @click="handleDownloadTemplate(item)"
          :key="item.label"
          type="primary"
          icon="el-icon-download"
          >{{ item.label }}</el-button
        >
      </el-button-group>
    </div>
    <div class="block-area">
      <div class="title">2.导入数据</div>
      <!-- <eleVUpload
        :accept="uploadOptions.accept"
        :upload-type="uploadOptions.fileType"
        :uploadTextTip="uploadOptions.uploadTextTip"
        :listType="uploadOptions.listType"
        @upLoadSuccess="upLoadSuccess($event,uploadOptions.key)"
        @removeFileList="removeFileList($event,uploadOptions.key)"
        @toGetSuccessData="toGetSuccessData"
      ></eleVUpload> -->
      <el-upload
        class="upload-demo"
        action=""
        :multiple="false"
        :accept="uploadOptions.accept"
        :file-list="fileList"
        :http-request="uploadFn"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">
          {{ uploadOptions.uploadTextTip }}
        </div>
      </el-upload>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button
        type="info"
        plain
        :loading="buttonLoading"
        @click="handleClose"
      >
        {{ $t("common.cancel") }}
      </el-button>
      <el-button type="primary" plain :loading="buttonLoading" @click="submit">
        {{ $t("common.confirm") }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import eleVUpload from "@/components/eleUpload/eleUpload";
import request from '@/utils/request'
const {
  download: $download,
  upload: $upload,
} = request

export default {
  name: "tableImport",
  components: {
    eleVUpload,
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
    templateList: {
      type: Array,
      default() {
        return [];
      },
    },
    uploadOptions: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      fileIsUploading: false,
      buttonLoading: false,
      fileList: [],
      file: null,
    };
  },
  computed: {
    isVisible: {
      get() {
        return this.dialogVisible;
      },
      set() {
        this.handleClose();
      },
    },
  },
  methods: {
    handleDownloadTemplate(data) {
      if (data.clickFn) {
        data.clickFn();
      }else{
        $download(data.url, '', data.downloadFileName)
      }
    },
    handleFileListChange(upload) {
      console.log('change'.upload)
      this.fileList = [...upload];
    },
    clearFileList() {
      this.fileList = [];
    },

    submit() {
      // console.log(this.file)
      if (!this.file) {
        this.$message.error("请上传文件");
        return false;
      }
      if(this.uploadOptions.uploadFn){
        this.uploadOptions.uploadFn(this.file)
      }else{
        const formData = new FormData()
        formData.append('file', this.file)
        $upload(this.uploadOptions.url, formData).then(res => {
          this.$message.success('上传成功')
          this.fileList = []
          if(this.uploadOptions.successFn){
            this.uploadOptions.successFn(res)
          }
        }).catch(err => {
          console.log(err)
          this.$message.error('上传失败')
        })
      }
    },

    handleClose() {
      this.$emit("close");
      this.$emit("update:dialogVisible", false);
    },

    // 重置表单
    reset() {
      // 先清除校验，再清除表单，不然有奇怪的bug
      // this.$refs.formRef.clearValidate()
      // this.$refs.formRef.resetFields()
    },

    // 关闭弹窗
    close() {
      this.$emit("close");
    },

    uploadFn(file) {
      // console.log(file.file)
      this.file = file.file
    },
    upLoadSuccess(e, key) {
      // this.form[key] = e.newFileList
      console.log("upLoadSuccess===", e);
    },
    removeFileList(fileList, key) {
      console.log("removeFileList======+", fileList);
      // this.form[key] = fileList
    },
    toGetSuccessData(data) {
      console.log("toGetSuccessData===", data);
    },
  },
};
</script>

<style lang="scss" scoped>
.tableImport-root {
}
.title {
  font-size: 14px;
  color: #333;
  margin-bottom: 15px;
}
.block-area {
  margin-bottom: 20px;
}

::v-deep .upload-btn {
  border: 1px solid #409eff;
  margin-bottom: 10px;
  color: #409eff;
}
</style>
